<template>
  <view class="expert-page">
    <view class="expert-card main-card">
      <view class="card-header">
        <image src="/static/select.png" class="search-icon" />
        <text class="card-title">专家名单</text>
      </view>
    </view>
    <view class="expert-list">
      <view
        v-for="(item, idx) in dataList"
        :key="idx"
        class="expert-item"
        :class="{ active: activeIndex === idx }"
        @click="toggle(idx)"
      >
        <view class="expert-card">
          <view class="main-expert">
            <view class="main-info">
              <view class="main-name">{{ item.name }}</view>
              <view class="main-badge">
                <image class="icon-badge" src="/static/yes2.png" />
                <view>中酒协认证</view>
              </view>
              <view class="main-desc" v-html="item.body" />
              <view class="detail-btn" @click.stop="getDetail(item)"> 查看详情 </view>
            </view>
            <view class="select-btn" @click.stop="selectExpert(item)"> 选择该专家 </view>
            <image class="expert-avatar" :src="img(item.avatar)" />
          </view>
        </view>
      </view>
    </view>

    <uv-popup
      ref="showDetail"
      mode="center"
      round="20"
      :closeable="true"
      @close="closeDetail"
    >
      <view class="expert-detail-modal">
        <view class="modal-header">
          <image :src="img(detailExpert.avatar)" class="modal-avatar" />
          <view class="modal-title">
            <view class="modal-name">{{ detailExpert.name || "-" }}</view>
            <view class="modal-year">从业年限：{{ detailExpert.work_year || 0 }}年</view>
          </view>
        </view>
        <view class="modal-desc-list" v-html="detailExpert.body" />
        <view v-if="detailExpert.cert_images?.length" class="modal-section-title">资质证书</view>
        <image
          v-for="(i, index) in detailExpert.cert_images"
          :key="index"
          :src="img(i)"
          class="modal-cert"
          @click="previewImage(index)"
        />
        <view v-if="detailExpert.talent?.length" class="modal-section-title">擅长</view>
        <view v-if="detailExpert.talent?.length" class="modal-goodat-list">
          <view v-for="g in detailExpert.talent" :key="g" class="modal-goodat">
            {{ g }}
          </view>
        </view>
        <view class="modal-section-title">问答入口</view>
        <view class="modal-qr-row">
          <image :src="img('upload/attachment/image/qrcode.png')" class="modal-qr" @click="previewQr" />
        </view>
      </view>
    </uv-popup>
    <uv-load-more :status="status" line v-if="dataList" height="60" />
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onPullDownRefresh, onReachBottom, onShow } from "@dcloudio/uni-app";
import { redirect, img } from "@/utils/common";
import { getBartender, getBartenderDetail } from "@/addon/shop/api/select";

const activeIndex = ref(-1);
const status = ref("loadmore");
const total = ref(0);
const dataList = ref([]);
const query = ref({
  page: 1,
  limit: 10,
});
const showDetail = ref(null);
const detailExpert = ref({});

onShow(() => {
  getList();
});

const getList = () => {
  status.value = "loading";
  getBartender(query.value)
    .then((res) => {
      if (res.code == 1) {
        dataList.value =
          query.value.page == 1 ? res.data.data : dataList.value.concat(res.data.data);
        total.value = res.data?.total;
        if (dataList.value.length) {
          activeIndex.value = 0;
        }
      }
    })
    .finally(() => {
      status.value = dataList.value.length >= total.value ? "nomore" : "loadmore";
      uni.stopPullDownRefresh();
    });
};
const toggle = (idx) => {
  activeIndex.value = activeIndex.value === idx ? -1 : idx;
};

const getDetail = (item) => {
  getBartenderDetail(item.id).then((res) => {
    if (res.code == 1) {
      let row = res.data;
      row.talent = row.talent.split(",").filter(Boolean);
      row.cert_images = row.cert_images
        .split(",")
        .filter(Boolean);
      detailExpert.value = row;
      showDetail.value.open();
    }
  });
};

// 预览证书
const previewImage = (index) => {
  uni.previewImage({
    urls: detailExpert.value.cert_images,
    current: index,
  });
};

// 预览二维码
const previewQr = () => {
  uni.previewImage({
    urls: [img('upload/attachment/image/qrcode.png')],
  });
};

// 选择专家
const selectExpert = (item) => {
  redirect({ url: "/addon/shop/pages/select/design", param: { bartender_id: item.id } });
};

const closeDetail = () => {
  showDetail.value.close();
};

// 下拉刷新
onPullDownRefresh(() => {
  query.value.page = 1;
  getList();
});

// 上拉加载更多
onReachBottom(() => {
  if (dataList.value.length < total.value) {
    query.value.page++;
    getList();
  }
});
</script>

<style lang="scss" scoped>
.expert-page {
  background: #f5f6fa;
  min-height: 100vh;
  padding-bottom: 40rpx;
  overflow: hidden;
}

.expert-card {
  border-top-left-radius: 18rpx;
  border-top-right-radius: 18rpx;
  width: 100%;
  position: relative;
  transition: all 0.3s;
  margin: 0;
  overflow: hidden;

  .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 12rpx;

    .search-icon {
      width: 28rpx;
      height: 28rpx;
      margin-right: 8rpx;
      margin-top: 2rpx;
    }
  }

  .card-icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 8rpx;
  }

  .card-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-left: 12rpx;
  }
}

.main-card {
  margin: 24rpx auto;
  width: 89.5%;
  background: #fff;
  margin-bottom: 0;
  padding: 20rpx;
}

.expert-list {
  margin: 0 20rpx 0 20rpx;
  background: #fff;
  border-bottom-left-radius: 10rpx;
  border-bottom-right-radius: 10rpx;
  padding: 0 36rpx 20rpx 0;

  .expert-item {
    background: #fff;
    margin-bottom: 18rpx;
    padding: 6rpx;
    padding-left: 30px;
    overflow: hidden;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 80rpx;
    border: 2rpx solid #e5e5e5;
    border-top-right-radius: 100rpx;
    border-bottom-right-radius: 100rpx;
    box-sizing: border-box;
    .expert-avatar {
      transition: all 0.3s;
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
      object-fit: cover;
      margin: 10rpx;
    }
  }

  .main-expert {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;

    .main-info {
      flex: 1;
      margin-bottom: 20rpx;
      position: relative;

      .main-name {
        font-size: 27rpx;
        font-weight: bold;
        margin-bottom: 6rpx;
        margin-top: 30rpx;
        max-width: 330rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .main-badge {
        position: absolute;
        right: 0;
        top: 36rpx;
        background: #fff5e8;
        color: #fcb056;
        border: 2rpx solid #fcb056;
        border-radius: 8rpx;
        font-size: 20rpx;
        width: 124rpx;
        padding: 2rpx 20rpx 2rpx 12rpx;
        margin-left: 20rpx;
        transition: all 0.3s;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .icon-badge {
          width: 18rpx;
          height: 18rpx;
          margin-right: 2px;
        }
      }

      .main-desc {
        height: 0;
        transition: all 0.3s;
        overflow: hidden;
      }
    }

    .detail-btn {
      display: none;
    }

    .select-btn {
      display: none;
    }
  }

  .active {
    background-image: url("/static/expert_bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top-right-radius: 18rpx;
    border-bottom-right-radius: 18rpx;
    border: 2rpx solid #ffbcbc;
    padding-top: 0;
    padding-right: 0;

    .main-info {
      .main-name {
        max-width: 350rpx;
        line-height: 30rpx;
        overflow : hidden;
        text-overflow: ellipsis;
        font-size:30rpx;
        display: -webkit-box;
        // -webkit-line-clamp: 2;
        white-space:pre-line;
        -webkit-box-orient: vertical;
      }
      
      .main-badge {
        right: 36rpx;
        top: 120rpx;
      }
    }
    .main-desc {
      width: 65%;
      color: #666;
      font-size: 27rpx;
      margin-bottom: 10rpx;
      margin-top: 40rpx;
      height: 150rpx !important;
      line-height: 50rpx;
      white-space: pre-line;
      overflow : hidden;
      text-overflow: ellipsis;
      font-size:30rpx;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      white-space:pre-line;
      -webkit-box-orient: vertical;
      word-break: break-all;
      transition: all 0.3s;
    }
    .detail-btn {
      display: block !important;
      color: #f00;
      border: 1rpx solid #f00;
      border-radius: 30rpx;
      font-size: 25rpx;
      padding: 4rpx 18rpx;
      text-align: center;
      width: 110rpx;
      margin-bottom: 14rpx;
      margin-top: 20rpx;
    }

    .select-btn {
      position: absolute;
      right: -4rpx;
      top: 0;
      color: #fff;
      border-radius: 0 18rpx 0 56rpx;
      background: linear-gradient(to bottom, #ff6a00, #f00);
      font-size: 25rpx;
      padding: 8rpx 66rpx;
      border: none;
      display: block !important;
    }
    .expert-avatar {
      transition: all 0.3s;
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
      margin-left: 18rpx;
      object-fit: cover;
      border: 7rpx solid #fff;
      box-shadow: 0 2rpx 8rpx #f3eaea;
      position: absolute;
      right: 3%;
      bottom: 2.5%;
    }
  }
}

.expert-detail-modal {
  width: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 52rpx 34rpx 34rpx;

  .modal-header {
    display: flex;
    align-items: center;
    padding-bottom: 24rpx;
    border-bottom: 2rpx solid #d8d8d8;

    .modal-avatar {
      width: 140rpx;
      height: 140rpx;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 28rpx;
    }
  }

  .modal-title {
    flex: 1;

    .modal-name {
      font-size: 38rpx;
      font-weight: bold;
    }

    .modal-year {
      color: #3d3d3d;
      font-size: 28rpx;
    }
  }

  .modal-desc-list {
    margin-bottom: 18rpx;
    margin-top: 18rpx;
    white-space: pre-line;
  }
}

.modal-section-title {
  font-size: 30rpx;
  font-weight: bold;
  margin: 18rpx 0 8rpx 0;
}

.modal-cert {
  width: 160rpx;
  height: 160rpx;
  border-radius: 10rpx;
  margin-bottom: 10rpx;
}

.modal-goodat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 18rpx;
  margin-bottom: 10rpx;

  .modal-goodat {
    background: #fff0f0;
    color: #ff0000;
    width: 39%;
    border-radius: 12rpx;
    padding: 10rpx 24rpx;
    font-size: 26rpx;
    text-align: center;
    border: 2rpx solid #f6d5d5;
  }
}

.modal-qr-row {
  text-align: center;
  margin-top: 10rpx;

  .modal-qr {
    width: 190rpx;
    height: 190rpx;
    margin-top: 20rpx;
  }

  .modal-qr-badge {
    background: #ffb400;
    color: #fff;
    border-radius: 20rpx;
    font-size: 22rpx;
    padding: 2rpx 14rpx;
    height: 36rpx;
    display: flex;
    align-items: center;
  }
}
</style>
